<template>
  <div>
    <div>
    
      <el-image
        v-for="(item, i) in baseUrlPrImgList"
        style="padding-right: 10px"
        :key="i"
        :src="item"
        :preview-src-list="isNeedBaseUrl ? baseUrlPrImgList : prImgList"
        fit="cover"
      >
        <div slot="error" class="image-slot">
          <svg-icon icon-class="img_error" size="40" />
        </div>
      </el-image>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // myImg: null,
    };
  },
  props: {
    imgSrc: {
      type: Array,
    },
    prImgList: {
      type: Array,
    },
    isNeedBaseUrl: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    baseUrlPrImgList() {
      var arr = this.imgSrc;
      if (arr.length > 1) {
        if (this.isNeedBaseUrl) {
          return arr.map((v) => {
            return `${this.$GLOBAL.baseurl}/storage/${v}`;
          });
        } else {
          return arr.map((v) => {
            return `${v}`;
          });
        }
      } else {
        if (this.isNeedBaseUrl) {
          return arr.map((v) => {
            return `${this.$GLOBAL.baseurl}/storage/${arr[0]}`;
          });
        } else {
          return `${arr[0]}`;
        }
      }
      return;
    },
    myImg() {
      if (this.imgSrc) {
        if (this.isNeedBaseUrl) {
          return `${this.$GLOBAL.baseurl}/storage/upload/${
            this.imgSrc.split("&")[0]
          }`;
        } else {
          return this.imgSrc.split("&")[0];
        }
      }
    },
  },
  // created() {
  //   if (this.imgSrc) {

  //   }
  // },
};
</script>

<style lang="less" scoped>
.el-image {
  width: 40px;
  height: 40px;
  /deep/.image-slot {
    width: 100%;
    height: 100%;
    display: flex;
    i {
      margin: auto;
      font-size: 20px;
    }
  }
}
</style>
